<template>
    <div class="index-page">
        <div class="index-header">
            <span class="logo_title"> <img width="auto" height="28" src="/src/assets/logo.svg" alt="logo">
                <span class="title">文章中心</span></span>
            <div style="display: flex;align-items: flex-end;gap: 15px;">
                <el-popover content="" placement="bottom">
                    <template #reference>
                        <span class="user">
                            <img src="https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg"
                                style="width: 25px;border-radius: 15px;">
                            <span style="font-size: 14px;">{{ authStore?.username }}</span>
                        </span>
                    </template>
                    <template #default>
                        <div style="cursor: pointer;width: 100% !important;display: flex;align-items: center;gap: 8px;"
                            @click="authStore.logout">
                            <svg viewBox="64 64 896 896" focusable="false" data-icon="logout" width="1em" height="1em"
                                fill="currentColor" aria-hidden="true">
                                <path
                                    d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 01-112.7 75.9A352.8 352.8 0 01512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 01-112.7-75.9 353.28 353.28 0 01-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 000-12.6z">
                                </path>
                            </svg>退出登录
                        </div>
                        <!-- 修改密码链接 -->
                        <div style="display: flex;align-items: center;gap: 5px;margin-top: 5px;">
                            <el-icon :size="16">
                                <Edit />
                            </el-icon>
                            <el-button style="color: #606266;" type="text" @click="showChangePasswordDialog"
                                class="change-password-link">
                                修改密码
                            </el-button>
                        </div>
                    </template>
                </el-popover>
            </div>

        </div>
        <div class="index-container">
            <div class="index-menu" :style="{ width: isShow ? '200px' : '50px' }">
                <a href="/article-manage" @click.prevent="$router.push('/article-manage')"
                    :class="['menu', route.fullPath.includes('article-manage') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">文章管理</span>
                        <span v-else key="short">文</span>
                    </transition>
                </a>
                <a href="/operation" @click.prevent="$router.push('/operation')"
                    :class="['menu', route.fullPath.includes('operation') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">运营配置</span>
                        <span v-else key="short">运</span>
                    </transition>
                </a>
                <a href="/category-setting" @click.prevent="$router.push('/category-setting')"
                    :class="['menu', route.fullPath.includes('category-setting') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">类目配置</span>
                        <span v-else key="short">类</span>
                    </transition>
                </a>
                <a href="/campaign" @click.prevent="$router.push('/campaign')"
                    :class="['menu', route.fullPath.includes('campaign') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">Campaign</span>
                        <span v-else key="short">C</span>
                    </transition>
                </a>
                <a href="/channel" @click.prevent="$router.push('/channel')"
                    v-if="authStore?.roles?.indexOf('superAdmin') !== -1"
                    :class="['menu', route.fullPath.includes('channel') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">Channel管理</span>
                        <span v-else key="short">C</span>
                    </transition>
                </a>
                <a href="/flow" @click.prevent="$router.push('/flow')"
                    :class="['menu', route.fullPath.includes('flow') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">关键词信息管理</span>
                        <span v-else key="short">关</span>
                    </transition>
                </a>
                <a href="/iaa" @click.prevent="$router.push('/iaa')"
                    :class="['menu', route.fullPath.includes('iaa') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">IAA配置管理</span>
                        <span v-else key="short">I</span>
                    </transition>
                </a>
                <a href="/choreography" @click.prevent="$router.push('/choreography')"
                    :class="['menu', route.fullPath.includes('choreography') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">编排记录</span>
                        <span v-else key="short">I</span>
                    </transition>
                </a>
                <a href="/material-recognition" @click.prevent="$router.push('/material-recognition')"
                    v-if="authStore?.roles?.includes('superAdmin') || authStore?.firms?.includes('shenzhen')"
                    :class="['menu', route.fullPath.includes('material-recognition') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">素材识别</span>
                        <span v-else key="short">素</span>
                    </transition>
                </a>
                <!-- <a href="/website-management" @click.prevent="$router.push('/website-management')"
                    :class="['menu', route.fullPath.includes('website-management') && 'active']">
                    <transition name="fade" mode="out-in">
                        <span v-if="isShow" key="full">网站管理</span>
                        <span v-else key="short">网</span>
                    </transition>
                </a> -->
                <span class="icon" @click="show">
                    <el-icon v-if="isShow">
                        <ArrowLeft />
                    </el-icon>
                    <el-icon v-else>
                        <ArrowRight />
                    </el-icon>
                </span>
            </div>
            <div :class="['index-main', !isShow && 'with-auto']">
                <router-view v-slot="{ Component, route }">
                    <keep-alive>
                        <component :is="Component" v-if="route.meta.keepAlive" :key="route.fullPath" />
                    </keep-alive>
                    <component :is="Component" v-if="!route.meta.keepAlive" :key="route.fullPath" />
                </router-view>
            </div>
        </div>
        <!-- 修改密码对话框 -->
        <el-dialog v-model="changePasswordVisible" title="修改密码" width="400px" :close-on-click-modal="false">
            <el-form :model="changePasswordForm" ref="changePasswordFormRef" :rules="changePasswordRules"
                label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="changePasswordForm.username" placeholder="请输入用户名" class="custom-input">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="changePasswordForm.oldPassword" type="password" placeholder="请输入原密码"
                        show-password class="custom-input">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="changePasswordForm.newPassword" type="password" placeholder="请输入新密码"
                        show-password class="custom-input">
                        <template #prefix>
                            <el-icon class="input-icon">
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelChangePassword">取消</el-button>
                    <el-button type="primary" @click="submitChangePassword" :loading="changePasswordLoading"
                        class="change-password-submit-btn">
                        确认修改
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <ArticleRecords ref="articleRecordsRef" />
    </div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useAuthStore } from '../store/auth';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import service from '../config';
import ArticleRecords from '../components/articleRecords.vue';
defineComponent({ name: 'Layout' })
const authStore = useAuthStore()
const route = useRoute()
const isShow = ref(true)
const show = () => {
    isShow.value = !isShow.value
}
// 修改密码相关
const changePasswordVisible = ref(false)
const changePasswordLoading = ref(false)
const changePasswordFormRef = ref<FormInstance>()
const articleRecordsRef = ref<{ showRecords: () => void }>()
interface ChangePasswordForm {
    username: string
    oldPassword: string
    newPassword: string
}


const changePasswordForm = ref<ChangePasswordForm>({
    username: '',
    oldPassword: '',
    newPassword: ''
})

// 修改密码表单验证规则
const changePasswordRules = reactive<FormRules<ChangePasswordForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    oldPassword: [
        { required: true, message: '请输入原密码', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
    ],
})

const showRecords = () => {
    articleRecordsRef.value?.showRecords()
}

// 修改密码相关方法
const showChangePasswordDialog = () => {
    changePasswordVisible.value = true
    // 重置表单
    changePasswordForm.value = {
        username: '',
        oldPassword: '',
        newPassword: ''
    }
}

const cancelChangePassword = () => {
    changePasswordVisible.value = false
    changePasswordForm.value = {
        username: '',
        oldPassword: '',
        newPassword: ''
    }
}

const submitChangePassword = async () => {
    if (!changePasswordFormRef.value) return

    await changePasswordFormRef.value.validate(async (valid) => {
        if (valid) {
            changePasswordLoading.value = true
            try {
                const response = await service.post('/auth/updatePassword', {
                    username: changePasswordForm.value.username,
                    oldPassword: changePasswordForm.value.oldPassword,
                    password: changePasswordForm.value.newPassword
                })

                ElMessage.success('密码修改成功')
                changePasswordVisible.value = false
                changePasswordForm.value = {
                    username: '',
                    oldPassword: '',
                    newPassword: ''
                }
            } catch (error: any) {
                ElMessage.error(error?.response?.data?.message || error?.message || '密码修改失败')
            } finally {
                changePasswordLoading.value = false
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.index-page {
    width: 100vw;
    height: 100%;

    .index-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(5, 5, 5, 0.06);

        .logo_title {
            display: flex;
            align-items: center;
            margin: 0 16px;

            img {
                width: 28px;
            }

            .title {
                font-size: 18px;
                color: rgba(0, 0, 0, 0.88);
                margin-left: 8px;
                font-weight: 600;
            }
        }

        .user {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-right: 35px;
        }

    }

    .index-container {
        display: flex;
        width: 100%;
        height: calc(100% - 56px);

        .index-menu {
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 5px 14px;
            border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
            margin-inline-end: -1px;
            gap: 10px;
            transition: width 0.3s ease;

            .menu {
                color: rgba(0, 0, 0, 0.65);
                text-decoration: none;
                height: 40px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                padding: 0 16px;
                font-size: 14px;
                margin-right: 4px;
                flex-wrap: nowrap;

                &:hover {
                    background-color: rgba(2, 2, 2, 0.03);
                    ;
                }

                &.active {
                    background-color: rgb(210, 229, 255);
                }

                .fade-enter-active,
                .fade-leave-active {
                    transition: opacity 0.1s ease;
                }

                .fade-enter-from,
                .fade-leave-to {
                    opacity: 0;
                }
            }

            .icon {
                position: absolute;
                right: -8px;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 13px;
                top: 20px;
                background-color: #fff;
                transition: transform 0.3s;
                cursor: pointer;
                border-radius: 50px;
            }
        }

        .index-main {
            width: calc(100% - 200px);
            height: 100%;
            background-color: rgba(2, 2, 2, 0.03);
            padding: 0 10px;

            &.with-auto {
                width: 100%
            }
        }
    }
}

// 修改密码对话框按钮样式
.change-password-submit-btn {
    background: linear-gradient(135deg, #35b1b1 0%, #2a8a8a 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(53, 177, 177, 0.3) !important;

    &:hover {
        background: linear-gradient(135deg, #3bc4c4 0%, #319494 100%) !important;
        box-shadow: 0 8px 25px rgba(53, 177, 177, 0.4) !important;
        transform: translateY(-2px);
    }

    &:active {
        transform: translateY(0);
    }

    &.is-loading {
        background: linear-gradient(135deg, #35b1b1 0%, #2a8a8a 100%) !important;
    }
}

// 自定义输入框样式
:deep(.custom-input) {


    .el-input__wrapper {
        border-radius: 12px;
        border: 2px solid #e1e8ed;
        background: #f8f9fa;
        box-shadow: none;
        transition: all 0.3s ease;
        padding: 0 16px;
        height: 50px;

        &:hover {
            border-color: #35b1b1;
            background: #fff;
        }

        &.is-focus {
            border-color: #35b1b1;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(53, 177, 177, 0.1);
        }
    }

    .el-input__inner {
        color: #2c3e50;
        font-size: 15px;
        font-weight: 500;

        &::placeholder {
            color: #95a5a6;
            font-weight: 400;
        }
    }

    .input-icon {
        color: #35b1b1;
        font-size: 18px;
    }
}
</style>
